<template>
    <div>
         <el-button  @click="addadmin" class="addbtn btn">添加管理员</el-button>
         <!-- 管理员列表 -->
         <el-table
            :height="tabheight"
            ref="adminref"
           :data="tableData"
           style="width: 100%">
           <el-table-column
             prop="username"
             label="用户名"
             >
           </el-table-column>
           <el-table-column
             prop=""
             label="昵称"
             >
           </el-table-column>
            <el-table-column
             prop=""
             label="账号"
             >
           </el-table-column>
           <el-table-column
             prop="jobs_name"
             label="角色名称"
             >
           </el-table-column>
           <el-table-column
             label="状态"
             >
             <template slot-scope="{row}">
               <span style="color:#009481" v-if="row.status == 0">启用</span>
               <span  style="color:#FF3636" v-else >禁用</span>
             </template>
           </el-table-column>
           <el-table-column
             prop="address"
             label="操作">
               <template  slot-scope="{row}">
                <el-dropdown 
                    trigger="click"
                     slot="dropdown"
                    >
                     <span class="el-dropdown-link">
                        <span class="imghover"></span>
                     </span>
                     <el-dropdown-menu slot="dropdown">
                       <div  @click="editbtn(row)" class="itemcss">编辑</div>
                       <div  @click="detadmin(row)" class="itemcss">删除</div>
                     </el-dropdown-menu>
                </el-dropdown>
               </template> 
             </el-table-column>
         </el-table>
         <!-- 分页 -->
          <el-row type="flex" justify="end">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 300, 400]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="title">
               </el-pagination>
        </el-row>
        <!-- //添加框 -->
         <el-dialog
          @close="close"
           title="添加管理员"
           :visible.sync="showadmin"
           width="30%"
           :show-close = false
           >
           <el-form  :model="formadmin" label-width="80px">
              <el-form-item label="管理员">
                <el-input v-model="formadmin.name"></el-input>
              </el-form-item>
                <el-form-item label="手机号">
                <el-input v-model="formadmin.mobile"></el-input>
              </el-form-item>
                <el-form-item label="账号">
                <el-input v-model="formadmin.username"></el-input>
              </el-form-item>
                 <el-form-item label="密码">
                <el-input v-model="formadmin.password"></el-input>
              </el-form-item>
                <el-form-item label="角色">
                   <!-- <el-select
                   style="width:100%"
                      v-model="formadmin.value2"
                      multiple
                      collapse-tags
                      placeholder="请选择">
                    </el-select> -->
              </el-form-item>
              <el-form-item label="等级权限">
                    <!-- <el-select
                     style="width:100%"
                      v-model="formadmin.value2"
                      multiple
                      collapse-tags
                      placeholder="请选择">
                    </el-select> -->
              </el-form-item>
              <el-form-item label="状态">
                <el-radio-group v-model="formadmin.status">
                  <el-radio  :label="0">开启</el-radio>
                  <el-radio  :label="1">关闭</el-radio>
                </el-radio-group >  
              </el-form-item>
           </el-form>  
            <hr>
            <el-row type="flex" >
              <el-col :push="2" span:10>
                  <el-button @click='detbtn' style="width:80%"  :push='3' type="info" >取消</el-button>
              </el-col>
                <el-col :push="1" span:10>
                  <el-button  @click='okadmin' style="width:80%" class="addbtn" >确定</el-button>
              </el-col>
            </el-row> 
         </el-dialog>
    </div>
</template>
<script>
import {adminzh ,alljigoulist} from "@/api/permission/index.js"
import { detguanliyuan} from "@/api/expend/index"
import  { mapState } from "vuex"
export default {
    name:'adminlist',
    data(){
        return {
          all:[],//机构列表
          title:0,
          tabheight:0,//自适应高度
          showadmin:false,
          tableData:[],
          // 新增编辑
          formadmin:{
            name:'',//管理员名称
            mobil:'',//手机号
            username:'',//账号
            password:'',//密码
            jobs_id:'',//角色id
            org:[
            ],
            status:'',
          },
          formlist:{
            name:'',
            limit:5,
            page:0
          }
        }
    },
    computed:{
      ...mapState(['userInfo'])
    },
    methods:{
      //机构列表
      async getjigou(){
        const data = await alljigoulist({admin_id:this.userInfo.admin_id})
        console.log(data);
      },
      // 修改管理员
      editbtn(row){
           this.showadmin = true
          this.formadmin=row
          console.log(this.formadmin.status);
      },
      // 获取管理员列表
      async getadminlist(){
         const data = await adminzh(this.formlist)
        this.tableData = data.data
        this.title = data.total
      },
      //添加管理员
      addadmin(){
        this.showadmin = true
      },
      // 表格高度自适应
      table(){
         this.tabheight = window.innerHeight - this.$refs.adminref.$el.offsetTop -32
      },
      // 条数
      handleSizeChange(val){
        this.formlist.limit =val
        this.getadminlist()
      },
      // 页数
      handleCurrentChange(val){
        this.formlist.page =val
        this.getadminlist()
      },
      //添加确定管理员按钮
      okadmin(){
        //编辑
         if(this.formadmin.admin_id){
          console.log('编辑');

         }else{
          //添加
          console.log('添加');
         }
        this.showadmin=false
      },
      detbtn(){
        this.showadmin = false
       },
      // 关闭弹窗的回调
      close(){
         this.formadmin={
            name:'',//管理员名称
            mobil:'',//手机号
            username:'',//账号
            password:'',//密码
            jobs_id:'',//角色id
            org:[
            ],
            status:'',
          }
      },
       //删除管理员列表
       detadmin(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
         const data = await detguanliyuan ({admin_id: row.admin_id})
         console.log(data);
          this.getadminlist(),
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        })
        //  const data = await detguanliyuan ({admin_id: row.admin_id})
        //  console.log(data);
        //   this.getadminlist(),
         this.showadmin=false
       }
    },
    created(){
          this.$nextTick(()=>{
          this.tabheight = window.innerHeight - this.$refs.adminref.$el.offsetTop -32
      })
       window.addEventListener('resize', this.table) 
    },
    mounted(){
      this.getadminlist(),
      this.getjigou()
    }
}
</script>
<style lang="less" scoped>
    hr {
    opacity: 0.5;
    width: 108%;
    margin-top: 50px;
    margin-left: -4%;
    margin-bottom: 15px;
    color: #999;
  } 
  /deep/ .el-radio__input.is-checked .el-radio__inner {
     border-color: #039A85; 
     background: #039A85; 
}
/deep/ .el-radio__input.is-checked+.el-radio__label {
     color: #686868; 
}
</style>